<template>
  <div class="App">
    <!-- 路由视图组件(只有在main.js里面注册好，路由组件的时候才可以使用) -->
    <div class="view">
      <router-view />
    </div>
    <div class="tab">
      <!-- router-link
         路由索引 
         to="路由地址(字符串)"
         to="option"
          option : {
            路由的参数
            path: '路由地址'
            name: '路由名称'
            路由地址和路由名称 只能写一个
          }
        -->
      <div :class="$route.path == item.path ? 'itemActive': 'item'" v-for="(item,index) in tab_list" :key="index">
        <!-- 当前路由信息对象的地址和要跳转的地址一致的时候，显示高亮的图片 -->
        <img :src="$route.path == item.path ? item.imgUrlActive: item.imgUrl" alt="">
        <router-link :to="item.path">
          {{ item.text }}
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tab_list: [
          {
            text: '首页',
            imgUrl: require('./assets/tab/home.png'),
            imgUrlActive:require('./assets/tab/home-active.png'),
            path: '/'
          },
          {
            text: '社区',
            imgUrl: require('./assets/tab/community.png'),
            imgUrlActive:require('./assets/tab/community-active.png'),
            path: '/community'
          },
          {
            text: '购物车',
            imgUrl: require('./assets/tab/cart.png'),
            imgUrlActive:require('./assets/tab/cart-active.png'),
            path: '/cart'
          },
          {
            text: '我的',
            imgUrl: require('./assets/tab/myself.png'),
            imgUrlActive:require('./assets/tab/myself-active.png'),
            path: '/myself'
          }
      ]
      }
    },
  }
</script>
<style lang="scss">
  *{
    margin:0;
    padding: 0;
  }
  .view{
    width: 100vw;
    height: 92vh;
  }
  .tab{
    width: 100vw;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 -3px 4px #eee;
    .item,
    .itemActive{
      width: 25%;
      height: 8vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        height: 5vh;
      }
      a{
        color: #333;
        text-decoration: none;
      }
    }
    .itemActive{
      a{
        color: rgb(252,145,83);
      }
    }
  }
</style>